<template>
    <el-col :span="24">
        <h3 class="header-title">语音识别翻译系统</h3>
        <el-menu :router="true" 
            :default-active="route.path"
            class="el-menu-vertical-demo" @open="handleOpen"
            @close="handleClose">
            <el-menu-item index="/">
                <template #title>
                    <el-icon>
                        <House />
                    </el-icon>
                    <span>工作台</span>
                </template>
            </el-menu-item>

            <el-sub-menu index="2">
                <template #title>
                    <el-icon>
                        <Document />
                    </el-icon>
                    <span>文字语音识别</span>
                </template>
                <el-menu-item index="2-1" :route="{name:'Upload'}">文字语音识别</el-menu-item>
                <!-- <el-menu-item index="2-2" :route="{ name: 'RealTime' }">实时语音转文字</el-menu-item> -->
            </el-sub-menu>

            <el-sub-menu index="3">
                <template #title>
                    <el-icon>
                        <Microphone />
                    </el-icon>
                    <span>实时语音转文字</span>
                </template>
                <el-menu-item index="3-1" :route="{ name: 'RealTime' }">实时语音转文字</el-menu-item>
            </el-sub-menu>



            <el-sub-menu index="5">
                <template #title>
                    <el-icon>
                        <Refresh />
                    </el-icon>
                    <span>文本翻译</span>
                </template>
                <el-menu-item index="5-1" :route="{name:'Translation'}">文本翻译</el-menu-item>
            </el-sub-menu>




            <el-sub-menu index="7">
                <template #title>
                    <el-icon>
                        <Help />
                    </el-icon>
                    <span>帮助中心</span>
                </template>
                <el-menu-item 
                    index="7-1"
                    @click="handleDocClick"
                    style="padding: 0; margin: 0"
                >
                    <a 
                    href="https://gitee.com/AirAM72/practical-training" 
                    target="_blank"
                    class="external-link"
                    >
                    使用文档
                    </a>
                </el-menu-item>
            </el-sub-menu>




        </el-menu>
    </el-col>
</template>

<script lang="ts" setup>
import { House, Document, Microphone, Refresh, Help } from '@element-plus/icons-vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const handleOpen = (key: string, keyPath: string[]) => {
  // 可选：菜单展开事件
}
const handleClose = (key: string, keyPath: string[]) => {
  // 可选：菜单关闭事件
}

const handleDocClick = () =>{

}
</script>

<style scoped>
.header-title {
    text-align: center;
    font-family: 'Arial', sans-serif;
    margin-top: 30px;
    margin-bottom: 5px;
    display: flex;
    align-items: flex-end; /* 调整为 flex-end */
    justify-content: center;
    gap: 10px;
    /* 图标和文本之间的间隔 */
}

.sidebar {
  min-height: 100vh;
  height: auto;
  background: var(--color-card);
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  /* 移除overflow hidden，允许滚动 */
}

.el-menu-vertical-demo {
    border-right: none;
    min-height: 100vh;
    background: var(--color-card) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    padding: 0;
    overflow-y: auto;
    scrollbar-width: thin; /* Firefox */
}
/* 隐藏滚动条（Webkit） */
.el-menu-vertical-demo::-webkit-scrollbar {
  display: none;
}
.external-link {
  display: block;
  padding: 0 40px;
  color: #2e2f32;
  text-decoration: none;
  height: 56px;
  line-height: 56px;
  transition: color 0.3s;
}
</style>